<template>
  <!-- 下拉 -->
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh" :success-text='freshText' success-duration='2000'>
    <!-- =={{count}} -->
    <!-- 上拉加载 -->
    <van-list v-model="loading" @load="onLoad" :finished="finished" finished-text="没有更多了">
      <!-- <van-cell v-for="item in newsList" :key="item.art_id" :title="item.title">
        <template #label>
          <span class="custom-title">{{item.aut_name}}===={{loading}}</span>
          <van-tag type="danger">{{item.like_count}}</van-tag>
          <span type="danger">{{item.pubdate}}</span>
        </template>
      </van-cell> -->
      <article-item :newsList='newsList'></article-item>
    </van-list>
  </van-pull-refresh>
</template>
           
<script>
import { articles_api } from '@/api/channels.js'
import  articleItem  from '@/components/article-item.vue'
export default {
  props:['channels'],
  data() {
    return {
      /* 下拉加载 */
      /* 
refresh  ======只要下拉这个事件就会触发
onLoad   ======上拉触底事件
*/
      isLoading: false, //  下拉   开启还是关闭
      loading: false, //  上拉   开启还是关闭
      finished: false, // 数据没有可以加载了为true就不会在触发这个  onLoad
      newsList: [],
      timestamp:'',
      freshText:''
    }
  },
  created() {},
  methods: {
    // 下拉加载组件
    async onRefresh() {
      // 异步更新数据
      const { data: res } = await articles_api({
            channel_id:this.channels.id ,
            timestamp: +new  Date() ,
            with_top: 1
        })
      this.newsList = res.data.results
      this.freshText='刷新数据成功，获取了'+res.data.results.length+'条数据'

      this.isLoading=false
    },
    
    //  上拉触底事件

    async onLoad() {//初次打开就会执行一次
      console.log(this.channels,123)
      // 异步更新数据
      const { data: res } = await articles_api({
            channel_id:this.channels.id ,
            timestamp:this.timestamp || +new  Date() ,
            with_top: 1
        })
      console.log(res, 45)
    //  每一次上拉 需要将之前的数据叠加
      this.newsList = [...this.newsList,...res.data.results]
      //  获取返回的数据是否有数据，如果有数据就表示还可以触发 onLoad事件 还可以接着上拉，否则下一次就没有毕业在上拉了
      //  不让上拉加载事件触发  this.finished = true;
       this.loading = false 
      if (!res.data.results.length) {
        //昂前上拉完毕后一定要结束上拉加载
        this.finished = true;
      }else{
        this.timestamp=res.data.pre_timestamp  //  获取下一次的请求的时间戳
      }
    }
  },
  components:{
    'article-item':articleItem
  }
}
</script>
<style scoped>
</style>